<template>
	<table class="table table-bordered table-sm">
		<thead>
			<tr>
				<th 
				scope="col" 
				class="text-center" 
				style="vertical-align:middle" 
				v-for="(item, index) in getTHeader"
				:key="index" 
				:rowspan="item.rowspan" 
				:colspan="item.colspan">{{ item.name }}</th>
			</tr>
			<tr>
				<th scope="col" 
				class="text-center" 
				style="vertical-align: middle;"
				v-for="(item, index) in skuLabels"
				:key="index"
				:rowspan="1" 
				:colspan="1"
				>{{ item.name }}</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for="(item, index) in list" :key="index">
				<!-- 商品规格 -->
				<th scope="row" v-for="(item2, index2) in item.skus"
				:key="index2" class="text-center">{{ item2.name }}</th>
				<td class="text-center" width="100">
					<span v-if="!item.image" class="btn btn-light border mr-2" @click="handleImage(item)">
						<i class="el-icon-plus"></i>
					</span>
					<img v-else 
					:src="item.image" class="rounded" 
					style="width:45px; height:45px; cursor: pointer;"
					@click="handleImage(item)"
					/>
				</td>
				<td class="text-center" width="100">
					<input type="number" v-model="item.pprice" class="form-control text-center"/>
				</td>
				<td class="text-center" width="100">
					<input type="number" v-model="item.oprice" class="form-control text-center"/>
				</td>
				<td class="text-center" width="100">
					<input type="number" v-model="item.cprice" class="form-control text-center"/>
				</td>
				<td class="text-center" width="100">
					<input type="number" v-model="item.stock" class="form-control text-center"/>
				</td>
				<td class="text-center" width="100">
					<input type="number" v-model="item.volume" class="form-control text-center"/>
				</td>
				<td class="text-center" width="100">
					<input type="number" v-model="item.weight" class="form-control text-center"/>
				</td>
				<td class="text-center" width="100">
					<input type="text" v-model="item.code" class="form-control text-center"/>
				</td>
			</tr>
		</tbody>
	</table>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	name: "sku-table",
	inject: ['app'],
	data() {
		return {
			list: []
		}
	},
	computed: {
		...mapGetters(['getTHeader', 'skuLabels', 'tableData']),
	},
	watch: {
		tableData(newValue,oldValue) {
			this.list = newValue;
		}
	},
	mounted(){
		this.list = this.tableData;
		// console.log("table");
		// console.log(this.tableData);
	},
	methods:{
		handleImage(item){
			this.app.show(res=>{
				item.image = res[0].url;
			}, 1)
		}
	}
}
</script>

<style>

</style>
